Accessibility best practices

Accessibility promotes a user-friendly experience and allows the widest range of users to engage with your content. Two vital reasons to ensure your content is accessible:

Alternative text 

Alternative text (also called alt text) provides a helpful written description of a visual element on your webpage. Accurate alt text is essential for accessibility, UX, and SEO. Screen readers and search engines will crawl this text, so the alt text needs to be clear and concise.

Alt text should be used for:

• Images (non-decorative)
• Graphs
• Diagrams

How to write alternative text 

When writing alt text, ask yourself, “What information am I trying to convey with this image?” Answering this question can help you write clear and helpful descriptions.

Avoid using phrases like “image of…” or "graphic of...” in your alternative text. Assistive technology provides this information automatically.

Avoid applying comments that attempt to editorialize the image. Use “Blonde woman standing alongside a green car” instead of “Blonde woman standing in an alluring pose alongside a green car.”

Alternative text should be:

• Short
• Meaningful
• Descriptive

NOTE: A big part of best practices for alt text is to be neutral with regard to gender, color, age, and sexual orientation unless the related content is specifically about one of those areas.

Descriptive links 

Descriptive links make content accessible and easy to understand. They should accurately describe where they direct users once clicked.

Descriptive link text should:

• Make sense on its own — Users of screen readers often navigate from link to link, skipping the text between.
• Be concise and meaningful — Similar to alternative text, links should be descriptive so users know exactly where they lead.
• Example: Instead of using https://portal.ct.gov/, use “Visit the Official State Website for Connecticut".

How to write descriptive links 

When creating links, remember the following:

• Let users know what to expect: When creating a link to a downloadable document or spreadsheet, follow the link with the file format in parentheses: (XLS), (CSV), (PDF), (DOC), or (PPT) added after the human-readable link to the file lets the user know what to expect.
• Links should open in the same window. If a link opens in a different window for any reason, this should be indicated in the link text for screen readers: “External Link,” or “Opens in a New Window.”
• Avoid using non-descriptive words like “click here,” “more,” or “learn more”. This includes call-to-action links (CTAs). The text in the CTA should include text to clarify the purpose. For example, instead of ‘Read more’ at the end of an article about the annual budget, use ‘Read more about the budget’.
• Avoid using the word “link” as part of the description. Assistive technology will identify a link as such and would be repetitive.
• Avoid using the actual URL as link text. URLs are usually long and can be made of random letters, characters, and numbers which can be tedious and confusing to a screen reader user. They are not human-readable or screen-reader friendly.
• Do not add a ‘title’ to the link properties when you link text.

Accessible design 

• Color: Use bold text to highlight important text. If you only use color to mark something as important, a user who is colorblind won’t be able to make that distinction.
• Contrast: If the contrast between colors is too low - for example, a small gray font on a white background - users who have low vision won’t be able to read or see the text. The contrast between text and background color should be a ratio of 4.5:1 for normal text and 3:1 for large text.
• Text formatting: ‘Bold’, ‘italicized’, and ‘strikethrough’, are NOT announced to screen reader users. To make sure a blind person knows something is important, use words like “Important:” or “Notice:” before the important statement.

Many tools can help check for the right color contrast. WebAIM has a helpful color contrast checker with additional information about color contrast.

Using tables 

Tables are difficult to make accessible, and they’re tricky to make responsive. When a table loses the relationship between the row and column headings and the rest of the content, it may be inaccessible for screen reader users.

If you have other ways to organize information on the page, try those first. Tables are best used for what they were designed for — tabular data.

Tips for better tables 

If you must use tables, keep these guidelines in mind:

• Use the simplest table possible.
• Avoid having nested tables or unnecessary rows and columns.
• Avoid using spanned rows and columns, as it can change the logical order of the rows and columns.
• Include table captions. Captions give the user an idea of what the table is about, which provides helpful context. And because the caption is tied to the table, a screen reader will read it first before reading the content.
• Identify row and column headings. Headers are the main categories for a table, and are very helpful in increasing accessibility.
• Do not use a table as a form or to align non-data content. Tables should be used only for datasets.

Accessible table example 

Check out this example of a table with a row heading and a column heading.

The row headers are Ball and Block. The column headers are Name, Color, Shape, and Size.